<template>
  <div id="pageContent">
    <com-head :opacity="0">{{name}}</com-head>
    <div class="foo">
      <div class="content" v-html="message"></div>
    </div>

    <div class="fixednav">
      <div class="pagenav" v-show="!navshow&&!buyshow&&!btnshow">
        <div class="box1" @click="loadpre">
          <i class="iconfont icon-48shangyishou"/>上一章
        </div>
        <div class="box2" @click="navVisible">
          <img src="../assets/image/contents.png">
        </div>
        <div class="box1" @click="loadnext">
          下一章
          <i class="iconfont icon-49xiayishou"/>
        </div>
      </div>
    </div>
    <alertFoot></alertFoot>
    <!-- 导航目录 -->
    <div class="usernav" v-show="navshow||buyshow">
      <div class="nav" v-if="navshow">
        <div class="box">
          <div class="left">
            <img src="../assets/image/contents.png">
          </div>
          <div class="right">
            <span>目录</span>
          </div>
        </div>
        <div class="alltitle">
          <div
            class="boxtitle"
            v-for="(item,index) in catalog"
            @click="loadcontent(item.id)"
            :key="index"
          >
            <p>{{item.chapter_number + item.chapter_name}}</p>
          </div>
        </div>
      </div>
      <div class="navhide" @click="navshow=false"></div>
      <!-- 充值 -->
      <div class="buybtn" v-if="buyshow">
        <div class="navhide1" @click="buyshow=false"></div>
        <p>你的书币余额不足，请充值。</p>
        <div class="recharge">
          <div
            class="item"
            @click="rechargeMoney(item)"
            v-for="(item,index) in charge"
            :key="index"
          >
            <p>
              {{item}}
              <span>元</span>
            </p>
            <p>{{item}}书币</p>
          </div>
        </div>
        <div class="warm">
          <p>温馨提示</p>
          <p>1、通过微信充值书币，可以在“个人中心”-“充值消费记录”中查看充值记录。</p>
          <p>2、在提现过程中可能会有延迟到账的情况，如果长时间未到账，请从“个人中心”-“客服反馈”里进行反馈，客服人员会尽快进行处理。</p>
          <!-- <p>3、点击充值，代表您已阅读并同意
            <router-link :to="{name: 'protocol',query: {status: '1'}}" tag="a">《用户协议》</router-link>和
            <router-link :to="{name: 'protocol',query: {status: '2'}}" tag="a">《隐私协议》</router-link>。
          </p>-->
        </div>
      </div>
    </div>
    <!-- 购买按钮btnshow&&!navshow&&!buyshow -->
    <div class="buymask" v-show="btnshow&&!navshow&&!buyshow">
      <div class="btn">
        <div class="box">
          <div class="yuoe">————余额：{{user_account}}书币————</div>
          <button @click="buychapter">购买本章节&emsp;{{chapter_price}}书币</button>
          <button @click="buyall">购买所有付费章节&emsp;{{price}}书币</button>
          <div class="mulu" @click="navshow=true">
            <span>目录</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "pageContent",
  data() {
    return {
      isDisable: "",
      poetry_title: "",
      poetry_content: "",
      poetry_explain: "",
      poetry_img: "",
      saying: "",

      show: true,
      navshow: false,
      buyshow: false,
      btnshow: false,
      name: "",
      message: "",
      book_id: "", //书籍id
      chapter: "", //章节
      user_account: "",
      chapter_price: "",
      price: "",
      charge: [],
      catalog: []
    };
  },

  computed: {},

  created() {
    if (this.$route.query.status === "0") {
      //详情阅读
      this.loading1();
      // this.loading11();
    } else if (this.$route.query.status === "1") {
      //继续阅读
      this.loading2();
    }
  },

  mounted() {
    // 目录列表
  },

  methods: {
    // 充值金额
    loadmoneynum() {
      this.axios
        .post("user/money")
        .then(({ data }) => {
          console.log(data);
          if (data.code === "200") {
            this.charge = data.data;
          } else if (data.code === "201") {
            this.$bus.$emit("toast", data.msg);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    // 目录点击
    loadcontent(id) {
      this.navshow = false;
      this.axios
        .post("index/bookdetail", {
          token: this.token(),
          chapter_id: id,
          book_id: this.book_id
        })
        .then(({ data }) => {
          console.log(data);
          if (data.code === "200") {
            this.message = data.data.content;
            this.book_id = data.data.book_id;
            this.chapter = data.data.chapter_id;
            this.user_account = data.data.user_account;
            this.chapter_price = data.data.chapter_price;
            this.price = data.data.price;
            this.name = data.data.book_name;

            data.data.is_book == "1" || !(data.data.chapter_price > 0)
              ? (this.btnshow = false)
              : (this.btnshow = true);
          } else if (data.code === "201") {
            this.$bus.$emit("toast", data.msg);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    loading1() {
      this.axios
        .post("index/bookdetail", {
          token: this.token(),
          chapter_id: this.$route.query.id,
          book_id: this.$route.query.book_id
        })
        .then(({ data }) => {
          console.log(data);
          if (data.code === "200") {
            this.message = data.data.content;
            this.book_id = data.data.book_id;
            this.chapter = data.data.chapter_id;
            this.user_account = data.data.user_account;
            this.chapter_price = data.data.chapter_price;
            this.price = data.data.price;
            this.name = data.data.book_name;
            data.data.is_book == "1" || !(data.data.chapter_price > 0)
              ? (this.btnshow = false)
              : (this.btnshow = true);
            this.cataloglist(); // 目录列表
          } else if (data.code === "201") {
            this.$bus.$emit("toast", data.msg);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    // 继续阅读
    loading2() {
      this.axios
        .post("index/read", {
          token: this.token()
        })
        .then(({ data }) => {
          console.log(data);
          if (data.code === "200") {
            this.message = data.data.chapter;
            this.book_id = data.data.book_id;
            this.chapter = data.data.chapter_id;
            this.user_account = data.data.user_account;
            this.chapter_price = data.data.chapter_price;
            this.price = data.data.price;
            this.name = data.data.book_name;
            data.data.is_book == "1" || !(data.data.chapter_price > 0)
              ? (this.btnshow = false)
              : (this.btnshow = true);
            // this.cataloglist(); // 目录列表
          } else if (data.code === "201") {
            this.$bus.$emit("toast", data.msg);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    // 购买本章
    buychapter() {
      this.axios
        .post("index/buysection", {
          token: this.token(),
          price: this.chapter_price,
          book_id: this.book_id,
          chapter: this.chapter
        })
        .then(({ data }) => {
          console.log(data);
          if (data.code === "200") {
            this.$bus.$emit("toast", data.msg);
          } else if (data.code === "201") {
            this.loadmoneynum();
            this.buyshow = true;
            this.$bus.$emit("toast", data.msg);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    // 购买剩下收费章节
    buyall() {
      this.axios
        .post("index/book_all", {
          token: this.token(),
          price: this.price,
          book_id: this.book_id,
          chapter: this.chapter
        })
        .then(({ data }) => {
          console.log(data);
          if (data.code === "200") {
            this.$bus.$emit("toast", data.msg);
          } else if (data.code === "201") {
            this.loadmoneynum();
            this.buyshow = true;
            this.$bus.$emit("toast", data.msg);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    // 离开阅读
    leaveload() {
      this.axios
        .post("index/quit", {
          token: this.token(),
          book_id: this.book_id,
          chapter: this.chapter
        })
        .then(({ data }) => {
          console.log(data);
          if (data.code === "200") {
            this.$bus.$emit("toast", data.msg);
          } else if (data.code === "201") {
            this.$bus.$emit("toast", data.msg);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    // 下一章
    loadnext() {
      this.axios
        .post("index/bookdetail", {
          token: this.token(),
          book_id: this.book_id,
          chapter_id: this.chapter + 1
        })
        .then(({ data }) => {
          console.log(data);
          if (data.code === "200") {
            this.message = data.data.content;
            this.book_id = data.data.book_id;
            this.chapter = data.data.chapter_id;
            this.user_account = data.data.user_account;
            this.chapter_price = data.data.chapter_price;
            this.price = data.data.price;
            this.name = data.data.book_name;
          } else if (data.code === "201") {
            this.$bus.$emit("toast", data.msg);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    // 上一章
    loadpre() {
      this.axios
        .post("index/bookdetail", {
          token: this.token(),
          book_id: this.book_id,
          chapter_id: this.chapter - 1
        })
        .then(({ data }) => {
          console.log(data);
          if (data.code === "200") {
            this.message = data.data.content;
            this.book_id = data.data.book_id;
            this.chapter = data.data.chapter_id;
            this.user_account = data.data.user_account;
            this.chapter_price = data.data.chapter_price;
            this.price = data.data.price;
            this.name = data.data.book_name;
          } else if (data.code === "201") {
            this.$bus.$emit("toast", data.msg);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    // 目录列表
    cataloglist() {
      this.axios
        .post("index/catalist", {
          token: this.token(),
          book_id: this.book_id
        })
        .then(({ data }) => {
          console.log(data);
          if (data.code === "200") {
            this.catalog = data.data;
          } else if (data.code === "201") {
            this.$bus.$emit("toast", data.msg);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    navVisible() {
      this.$bus.$emit("alertFoot", {
        button: [
          {
            text: "返回目录",
            callback: () => {
              this.navshow = true;
            }
          },
          {
            text: "返回首页",
            callback: () => {
              this.$router.push("index");
            }
          }
        ]
      });
    },
    rechargeMoney(num) {
      if (!this.isDisable) {
        this.isDisable = true;
        setTimeout(() => {
          this.isDisable = false;
        }, 1000);
        this.axios
          .post("user/topup", {
            token: this.token(),
            price: num
          })
          .then(({ data }) => {
            console.log(data);
            if (data.code === "200") {
              const jsApiParameters = data.data;
              this.jsSdk(jsApiParameters);
            } else if (data.code === "201") {
              this.$bus.$emit("toast", data.msg);
            }
          })
          .catch(function(error) {
            console.log(error);
          });
      }
    },
    jsSdk(jsApiParameters) {
      const that = this;
      WeixinJSBridge.invoke(
        "getBrandWCPayRequest",
        {
          appId: jsApiParameters.appId,
          package: jsApiParameters.package,
          nonceStr: jsApiParameters.nonceStr,
          timeStamp: jsApiParameters.timeStamp,
          signType: jsApiParameters.signType,
          paySign: jsApiParameters.paySign
        },
        // jsApiParameters,
        function(res) {
          WeixinJSBridge.log(res.err_msg);
          var result = res.err_msg;
          // alert(JSON.stringify(res));
          // return;
          if (result == "get_brand_wcpay_request:ok") {
            alert("支付成功");
            var url = "http://shopq.xiaohanbo.com/pageContent";
          } else {
            alert("你取消了支付");
            var url = "http://shopq.xiaohanbo.com/pageContent";
          }
            that.buyshow = false;
          // window.location.href = url;
        }
      );
    }
  }
};
</script>
<style lang='scss'>
#pageContent {
  // background: url("../assets/image/pagebg.png") no-repeat;
  background-attachment: fixed;
  background-size: cover;
  // overflow: scroll;
  padding: 120px 32px 350px;
  .foo img {
    width: 100%;
  }
  .content {
    padding-top: 50px;
    padding-bottom: 50px;
    box-sizing: border-box;
    width: 100%;
    height: 80vh;
    overflow: scroll;
  }
  .fixednav {
    width: 686px;
    position: fixed;
    bottom: 60px;
    right: 32px;
    .pagenav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .box1 {
        width: 202px;
        height: 76px;
        line-height: 76px;
        text-align: center;
        border-radius: 10px;
        border: 1Px solid #555;
      }
      .box2 {
        width: 60px;
        height: 50px;
        img {
          width: 100%;
        }
      }
    }
  }
  .usernav {
    position: fixed;
    top: 80px;
    left: 0;
    width: 100vw;
    height: calc(100vh - 80px);
    z-index: 100;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: flex-start;
    .nav {
      width: 550px;
      padding-left: 32px;
      box-sizing: border-box;
      background: rgba(255, 255, 255, 1);
      p {
        font-size: 28px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(85, 85, 85, 1);
        line-height: 60px;
      }
      .box {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .left {
          width: 37px;
          height: 40px;
          img {
            width: 100%;
          }
        }
        .right {
          width: 426px;
          margin-left: 20px;
          span {
            font-size: 32px;
            font-family: PingFangSC-Regular;
            font-weight: 500;
            color: rgba(0, 0, 0, 1);
            line-height: 80px;
          }
          span:nth-of-type(2) {
            display: inline-block;
            vertical-align: middle;
            margin-left: 24px;
            width: 32px;
            height: 32px;
            line-height: 32px;
            text-align: center;
            border-radius: 16px;
            background: rgba(184, 25, 25, 1);
            font-size: 22px;
            color: rgba(255, 255, 255, 1);
          }
        }
      }
      .alltitle {
        height: calc(100% - 120px);
        overflow: scroll;
        padding: 0px 32px 80px 0;
        box-sizing: border-box;
      }
    }
    .navhide {
      width: 200px;
      height: 100%;
      background: rgba(88, 46, 46, 0);
    }
  }
  .buybtn {
    height: 80vh;
    background-color: #f9f9f9;
    position: fixed;
    bottom: 0;
    overflow: scroll;
    .navhide1 {
      width: 100%;
      height: 300px;
      position: fixed;
      top: 0;
      background: rgba(88, 46, 46, 0);
    }
    p {
      padding: 0 32px;
      line-height: 76px;
      color: rgba(85, 85, 85, 1);
      font-size: 26px;
      text-align: center;
    }
    .recharge {
      margin: 0 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      .item {
        width: 342px;
        height: 200px;
        background-color: #fff;
        margin-left: 2px;
        margin-bottom: 2px;
        text-align: center;
        p:nth-of-type(1) {
          margin-top: 50px;
          font-size: 40px;
          color: #ec0202;
          line-height: 60px;

          span {
            font-size: 26px;
          }
        }
        p:nth-of-type(2) {
          font-size: 24px;
          color: #555;
          line-height: 40px;
        }
      }
    }
    .warm {
      height: 100%;
      background: rgb(248, 246, 246);
      p:nth-of-type(1) {
        text-align: center;
      }
      p {
        line-height: 50px;
        font-size: 24px;
        color: rgba(85, 85, 85, 1);
        text-align: left;
      }
    }
  }
  .buymask {
    position: fixed;
    top: 80px;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100;
    background: rgba(0, 0, 0, 0);
    display: flex;
    justify-content: flex-start;
    .btn {
      position: fixed;
      bottom: 0px;
      left: 0;
      width: 750px;
      height: 700px;
      // background: linear-gradient(
      //   180deg,
      //   rgba(240, 225, 208, 0.2) 0%,
      //   rgba(240, 225, 208, 0.7) 50%,
      //   rgba(242, 230, 217, 1) 100%
      // );
      text-align: center;
      .box {
        width: 100%;
        height: 504px;
        position: absolute;
        bottom: 0px;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        // background-color: #f2e6d9;
        background: url("../assets/image/readimg.png") no-repeat;
        background-size: contain;
        button {
          width: 526px;
          height: 80px;
          margin-top: 30px;
          border-radius: 10px;
          border: 2px solid;
          background-color: rgba(240, 225, 208, 0);
          font-size: 28px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(47, 44, 41, 1);
        }
        .yuoe {
          line-height: 120px;
          font-size: 24px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
        }
        .mulu {
          width: 100%;
          span {
            line-height: 120px;
            border-bottom: 1Px solid #000;
          }
        }
      }
    }
  }
}
</style>